<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="__PUBLIC__/admin/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="__PUBLIC__/admin/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="__PUBLIC__/admin/css/style.css?v=4.1.0" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/uploadify/uploadify.css"/>
    <script src="__PUBLIC__/admin/js/jquery.min.js?v=2.1.4"></script>
    <script src="__PUBLIC__/admin/js/date.js"></script>
</head>

<script>
    var url = "{:url('seckill/lst')}";
    var insertUrl = "{:url('seckill/add')}";
    var gurl = "/{$Request.module}";
</script>

<body class="gray-bg">
<style>
    input.error {
        border: 1px solid red;
    }

    span.error {
        padding-top: 10px;
        color: #f00;
        font-size: 12px;
    }

    #calendarPanel table td {
        border: solid #FFF;
        border-width: 0px 1px 1px 0px;
        padding: 3px 3px;
    }
</style>


<style>
    .shuxing {
        width: 600px;
        height: 100%;
        overflow: hidden;
    }

    .goodsAttrC {
        width: 600px;
        height: 100%;
        overflow: hidden;
    }

    .goodsAttrC .attr {
        width: 600px;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        font-weight: bold;
    }

    .goodsAttrC ul {
        width: 600px;
        height: 100%;
        overflow: hidden;
        padding-left: 0px;
    }

    .goodsAttrC ul li {
        height: 30px;
        line-height: 12px;
        font-size: 14px;
        text-align: center;
        padding: 10px;
        float: left;
        margin-right: 15px;
        list-style-type: none;
        cursor: pointer;
        background-color: #F5F5F5;
    }

    .on {
        border: 2px solid #1992FC;
    }

    .goods_info {
        width: 600px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
    }

    .qbattr {
        height: 30px;
        line-height: 12px;
        font-size: 14px;
        text-align: center;
        padding: 10px;
        float: left;
        margin-top: 20px;
        cursor: pointer;
        background-color: #F5F5F5;
    }
</style>

<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>增加秒杀活动</h5>
                </div>

                <div class="ibox-content">
                    <div style="width:95%; height:100%; margin:0px auto 50px auto; overflow:hidden; padding:20px; font-size:14px; line-height:25px; background-color:#F5F5F6;">
                        1.不存在商品规格的商品不用选择商品规格即添加秒杀活动<br/>
                        2.存在商品规格且不存在价格区间的商品可选择所有商品规格添加秒杀活动<br/>
                        3.存在商品规格且存在价格区间的商品需指定商品规格添加秒杀活动<br/>
                    </div>
                    <form method="post" class="form-horizontal" id="form">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">活动名称：</label>
                            <div class="col-sm-6">
                                <input type="text" name="activity_name" class="form-control">
                            </div>
                            <label class="col-sm-1" style="padding-top:7px; color:#F00; font-size:16px;">*</label>
                        </div>
                        <div class="hr-line-dashed"></div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">选择商品：</label>
                            <div class="col-sm-6">
                                <button type="button" class="btn btn-success" onclick="selectGoods();">选择商品</button>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">已选择商品：</label>
                            <div class="col-sm-6">
                                <table class="table table-hover table-bordered">
                                    <thead class="biaoge">
                                    <tr>
                                        <th style="width:30%">商品名称</th>
                                        <th style="width:20%">缩略图</th>
                                        <th style="width:15%">所属分类</th>
                                        <th style="width:20%">金额</th>
                                        <th style="width:15%">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody id="goods_list">

                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <input type="hidden" name="goods_id" value="" />
                        <div class="hr-line-dashed"></div>

                        <div class="szattr" attr_type="0" style="display:none;">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">秒杀库存/价格：</label>
                                <div class="col-sm-6">
                                    <div class="shuxing">

                                    </div>
                                </div>

                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="no-option" style="display: none;">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">秒杀价格：</label>
                                <div class="col-sm-2">
                                    <div class="input-group">
                                        <input type="text" name="price" class="form-control">
                                        <span class="input-group-addon">元</span>
                                        <label class="col-sm-1" style="padding-top:7px; color:#F00; font-size:16px;">*</label>
                                    </div>
                                </div>

                                <label class="col-sm-2 control-label">秒杀库存：</label>
                                <div class="col-sm-2">
                                    <div class="input-group">
                                        <input type="text" name="num" class="form-control">
                                        <span class="input-group-addon">件</span>
                                        <label class="col-sm-1" style="padding-top:7px; color:#F00; font-size:16px;">*</label>
                                    </div>
                                </div>

                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>


                        <div class="form-group">
                            <label class="col-sm-2 control-label">单人限购数量：</label>
                            <div class="col-sm-6">
                                <input type="text" name="xznum" class="form-control">
                            </div>
                            <label class="col-sm-1" style="padding-top:7px; color:#F00; font-size:16px;">*</label>
                        </div>
                        <div class="hr-line-dashed"></div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">活动时间：</label>
                            <div class="col-sm-8">
                                <div style="float:left; margin-right:25px;">
                                    开始时间：<input type="text" name="start_time" onclick="SetDate(this,'yyyy-MM-dd hh:mm:ss')" readonly="readonly" class="form-control">
                                </div>
                                <div style="float:left;">
                                    结束时间：<input type="text" name="end_time" onclick="SetDate(this,'yyyy-MM-dd hh:mm:ss')" readonly="readonly" class="form-control">
                                </div>
                            </div>
                            <label class="col-sm-1" style="padding-top:7px; color:#F00; font-size:16px;">*</label>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label"></label>
                            <div class="col-sm-6" style="line-height:20px;">
                                平台每日秒杀活动时间段为每日整点，活动开始时间在以上时间段，并被平台设为推荐后可在平台每日秒杀活动版块展示
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">活动介绍:</label>
                            <div class="col-sm-6">
                                <textarea name="remark" class="form-control"></textarea>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <input type="hidden" name="optionArray" value=''>
                        <input type="hidden" name="goods_attr" value="">

                        <div class="form-group">
                            <div class="col-sm-4 col-sm-offset-2">
                                <button class="btn btn-primary" type="submit" id="doSubmit" style="margin-right:20px;">保存内容</button>
                                <button type="reset" class="btn btn-default">重置</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- 全局js -->
<script src="__PUBLIC__/admin/js/bootstrap.min.js?v=3.3.6"></script>
<!-- 自定义js -->
<script type="text/javascript" src="__PUBLIC__/uploadify/jquery.uploadify.min.js"></script>
<script src="__PUBLIC__/admin/js/plugins/layer/layer.min.js"></script>
<script src="__PUBLIC__/admin/js/plugins/validate/jquery.validate.min.js"></script>
<!-- iCheck -->
<script src="__PUBLIC__/admin/js/plugins/iCheck/icheck.min.js"></script>
<script src="__PUBLIC__/admin/js/common/ajax.js"></script>

<script>

    function optionArray()
    {
        var option_stock = new Array();
        $('.option_stock').each(function (index,item) {
            option_stock.push($(item).val());
        });

        var option_id = new Array();
        $('.option_id').each(function (index,item) {
            option_id.push($(item).val());
        });

        var option_ids = new Array();
        $('.option_ids').each(function (index,item) {
            option_ids.push($(item).val());
        });



        var option_productprice = new Array();
        $('.option_productprice').each(function (index,item) {
            option_productprice.push($(item).val());
        });

        var options = {
            option_stock : option_stock,
            option_id : option_id,
            option_ids : option_ids,
            option_productprice : option_productprice,
        };
        $("input[name='optionArray']").val(JSON.stringify(options));
    }
    $(function () {
        var container = $('.content-option');
        $("input[name=option_id_checked]",container).removeProp('checked');

        $('.shuxing').on('click','.select_all',function(){
            if(this.checked == true){
                $('.option-item input:checkbox').prop('checked',true);
            }else{
                $('.option-item input:checkbox').prop('checked',false);
            }
        })

        var icon = "<i class='fa fa-times-circle'></i>&nbsp;&nbsp;";

        $('#form').validate({
            errorElement: 'span',
            debug: true,//只验证不提交表单
            //layer ajax提交表单
            submitHandler: function () {
                // 序列化 表单数据 后提交 ，太简洁了
                var goods_id = $('input[name="goods_id"]').val();
                if (goods_id == 0) {
                    layer.msg('请选择商品', {icon: 2, time: 1000});
                    return false;
                }

                var attr_type = $('.szattr').attr('attr_type');

                if (attr_type == 1) {
                    optionArray();
                }else{

                    var num = $('input[name=num]').val();
                    if (num == '') {
                        layer.msg('请填写秒杀库存', {icon: 2, time: 2000});
                        return false;
                    }


                    var price = $('input[name=price]').val();
                    if (price == '') {
                        layer.msg('请填写秒杀价格', {icon: 2, time: 2000});
                        return false;
                    }
                }

                post(insertUrl, 'POST', $('#form').serialize(), 1);
                return false;
            },//这是关键的语句，配置这个参数后表单不会自动提交，验证通过之后会去调用的方法

            rules: {
                activity_name: {required: true},
                price: {required: true},
                num: {
                    required: true,
                    digits: true
                },
                start_time: {required: true},
                end_time: {required: true}
            },

            messages: {
                activity_name: {required: icon + '必填'},
                price: {required: icon + '必填'},
                num: {
                    required: icon + '必填',
                    digits: icon + '必须是整数'
                },
                start_time: {required: icon + '必填'},
                end_time: {required: icon + '必填'}
            }
        });
    });

    function selectGoods() {
        var goods_id = $('input:radio[name=goods_id]:checked').val();
        //过滤选择重复信息
        var goodsurl = gurl + "/hdgoods/lst/goods_id/" + goods_id;

        layer.open({
            type: 2,
            title: '选择商品信息',
            shadeClose: true,
            shade: 0.3,
            area: ['70%', '80%'],
            content: goodsurl,
        });
    }

    function setCol(cls) {
        $("." + cls).val($("." + cls + "_all").val());
    }

    function call_backgoods(goods_id,table_html) {
        layer.closeAll('iframe');
        $('#goods_list').html(table_html);

        if (goods_id == null) {
            layer.msg('请选择商品', {icon: 2, time: 1000});
            return false;
        }

        $('input[name="goods_id"]').val(goods_id);

        layer.load(2);

        $.ajax({
            url: "{:url('seckill/getGoodsInfo')}",
            type: 'POST',
            data: {'id': goods_id},
            dataType: 'json',
            success: function (data) {
                layer.closeAll('loading');
                if (data.status == 1) {
                    if (data.data.hasoption == 1) {
                        $('.szattr').show();
                        $('.shuxing').html(data.data.option);
                        $('.szattr').attr('attr_type', 1);
                        $('.no-option').hide();
                    } else {
                        $('.shuxing').html('');
                        $('.szattr').hide();
                        $('.no-option').show();
                        $('.szattr').attr('attr_type', 0);
                    }
                } else {
                    layer.closeAll('loading');
                }
            },
            error: function () {
                layer.closeAll('loading');
            }
        });
    }


    function yichu(obj) {
        $(obj).parent().parent().remove();
        $('.szattr').hide();
        $('.szattr').attr('attr_type', 0);
        $('.shuxing').html('');
        $('input[name="goods_id"]').val(0);
    }

    function cl() {
        location.href = url;
    }
</script>

</body>
</html>